*{
    margin:0;
    padding:0;
}
:root, body{
    height:100%;
}
body{
    perspective: 3000px;
    transform-style:preserve-3d;
    /* 
        当设置这两个属性其中之一时，相对于文档（其实是相对于首屏）定位的元素会变成相对这个元素定位
        所以body得给一个高度
    */
}

@keyframes round{
    0%{
        transform: translate(-50%, -50%) rotatey(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotatey(360deg);
    }
}

div.wrapper{    
    position: absolute;
    left:calc(50%);
    top:calc(50%);
    width:300px;
    height:300px;
    transform: translate(-50%, -50%);
    /* 百分比相对于自身 */
    transform-style:preserve-3d;
    animation:round 10s linear infinite;
    
}

img{
    position:absolute;
    width:300px;
    backface-visibility:hidden;
    /* 
        backface-visibility 
        默认值：visible
        这个属性就是设置能不能让图片的背面显示在视野里
    */
}

img:nth-of-type(1){
    transform:rotatey(45deg) translatez(100px);
}

img:nth-of-type(2){
    transform:rotatey(90deg) translatez(500px);
}

img:nth-of-type(3){
    transform:rotatey(135deg) translatez(300px);

}

img:nth-of-type(4){
    transform:rotatey(180deg) translatez(500px);

}

img:nth-of-type(5){
    transform:rotatey(225deg) translatez(200px);

}

img:nth-of-type(6){
    transform:rotatey(270deg) translatez(500px);

}

img:nth-of-type(7){
    transform:rotatey(315deg) translatez(800px);

}

img:nth-of-type(8){
    transform:rotatey(360deg) translatez(500px);

}




